<template>
  <div class="step">
    <h1>烹饪步骤</h1>
    <div class="stepItem">
      <van-index-bar :index-list="indexList">
        <template v-for="(item, index) in step">
          <van-index-anchor
            index="1"
            :key="index + Math.random()"
            :highlight-color="color"
            ><span style="color: #000; font-weight: bolder; margin-left: -16px"
              >{{
                index + 1 == step.length
                  ? "最后一步"
                  : "步骤" + (index + 1) + "/"
              }}{{ index + 1 == step.length ? "" : step.length }}</span
            >
          </van-index-anchor>
          <div class="card" :key="index + Math.random()">
            <div
              class="image"
              :style="{
                height: (item.image_height / item.image_width) * 90 + 'vw',
                backgroundImage: 'url(' + item.image + ')',
              }"
              @click="tocook(index)"
            ></div>
            <h3>{{ item.content }}</h3>
          </div>
        </template>
        <span class="time">{{ time }}</span>
      </van-index-bar>
    </div>
    <div class="tips" v-if="tips">
      <h5>小贴士</h5>
      <h6 v-for="(item, index) in tipslist" :key="index">{{ item }}</h6>
    </div>

    <!-- 烹饪模式 -->
    <van-image-preview
      class="cook"
      :start-position="startPosition"
      v-model="show"
      :images="images"
      @change="onChange"
    >
      <template v-slot:index>第{{ toindex }}步</template>
      <template slot:cover>{{ step.content }}</template>
    </van-image-preview>
  </div>
</template>

<script>
export default {
  props: ["step", "tips", "time"],
  data: function () {
    return {
      show: false,
      indexList: [],
      color: "#000",
      index: 0,
      startPosition: 1,
      toindex: 0,
    };
  },
  computed: {
    tipslist() {
      return this.tips ? this.tips.split("\n\n") : "";
    },
    images() {
      return this.step.map((ele) => ele.image);
    },
  },
  watch: {
    index(n, o) {
      this.toindex = this.toindex + n - o;
    },
  },
  methods: {
    onChange(index) {
      this.index = index;
    },
    tocook(n) {
      console.log(n + 1);
      this.startPosition = n;
      this.toindex = n + 1;
      this.show = true;
    },
  },
};
</script>

<style lang="less" scoped>
.step {
  padding: 5px 15px;
  h1 {
    font-size: 15px;
    font-weight: bolder;
  }
  .stepItem {
    .image {
      width: calc(100vw - 30px);
      background-color: #e6e6e6;
      background-size: 100%;
      background-position: center;
      border-radius: 10px;
    }
    h3 {
      margin: 10px 0;
      font-size: 15px;
      line-height: 25px;
    }
    .time {
      font-size: 12px;
      color: #aaa;
      transform-origin: left;
      transform: scale(0.8);
    }
  }
  .tips {
    margin-top: 20px;
    h5 {
      font-size: 15px;
      font-weight: bolder;
      margin-bottom: 10px;
    }
    h6 {
      font-size: 15px;
      line-height: 25px;
      margin-bottom: 25px;
    }
  }
  .cook {
    h3 {
      position: fixed;
      bottom: 10vh;
      left: 0;
      color: #fff;
    }
  }
}
</style>